import React, { Component } from 'react';
import { Button, Form, Input, message } from 'antd';
import { Link, hashHistory} from 'react-router';
import styles from './index.less';
import logoImg from '../../assets/images/logo.png';
import bgImg from '../../assets/images/bg.jpg';
import { userLogin } from '../../actions'
import { connect } from 'react-redux';

const FormItem = Form.Item;

function noop() {
    return false;
}

 class Login extends Component {
    constructor(pros) {
        super(pros);
    }

    submitLogin(e) {
      this.props.form.validateFields((errors, values) => {
        if (!!errors) {
          console.log('Errors in form!!!');
          return;
        }
        let login = {
          email : values.email,
          password : values.password,
        }
        console.log(login);
        this.props.dispatch(userLogin.request()(login));
      });

    }

    componentWillMount(){
        this.setState({
            height: document.body.clientHeight
        });
    }
    // 自动获取浏览器可视区域高度
    autoHeigth(){
        this.setState({
            height: document.body.clientHeight
        });
    }

    componentDidMount(){
        // 监听window窗口变化,自动调整左侧菜单的高度
        window.addEventListener('resize', this.autoHeigth.bind(this));
    }

    componentWillUnmount(){
        // 组件注销时,移除window的resize事件监听,释放浏览器内存
        window.removeEventListener('resize',this.autoHeigth.bind(this));
    }

    render() {
      const { getFieldDecorator, getFieldError, isFieldValidating } = this.props.form;
      let { loading } = this.props;

        var documentHeight = this.state.height - 64;

        return(
            <div className={styles.loginBg} style={{minHeight: documentHeight}}>
                <div className={styles.login_header}>
                    <div className={styles.login_header_nav}>
                        <h1 className='pull-left'>
                            <a href="#" target="_self" className={styles.my_logo}>
                                <img src={logoImg} alt="" style={{height:55}}/>
                            </a>
                        </h1>
                        <div className="pull-right">
                            <ul className="my-nav">
                            </ul>
                        </div>
                    </div>
                </div>

                <div className={styles.login_content}>
                    <section className={styles.login_form}>
                        <div className={styles.login_title}>
                            <div>
                                <img src={logoImg} alt="" style={{height:40}}/>
                            </div>
                            <h2 style={{fontSize:'18px',color:'#666666'}}>内蒙古科技大学网签平台</h2>
                        </div>
                        <div className={styles.login_input}>
                            <Form horizontal>
                                <FormItem hasFeedback >
                                  {getFieldDecorator('email', {
                                    validate: [{
                                      rules: [
                                        { required: true, whitespace: true, message:"请输入用户名，学生请输入学号！" },
                                      ],
                                      trigger: ['onBlur', 'onChange'],
                                    }],
                                  })(
                                    <Input type="text" placeholder="用户名" />
                                  )}
                                </FormItem>

                                <FormItem hasFeedback >
                                  {getFieldDecorator('password', {
                                    rules: [
                                      { required: true, whitespace: true, min:6, message: '请输入密码！' }
                                    ],
                                  })(
                                    <Input type="password" autoComplete="off" placeholder="密码"
                                           onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                                    />
                                  )}
                                </FormItem>

                                <FormItem>
                                        <Button type="primary" loading={loading} style={{width:"100%",height:38,fontSize:16}}
                                            onClick={this.submitLogin.bind(this)}  >
                                            登录
                                        </Button>
                                    </FormItem>
                                </Form>
                        </div>
                    </section>
                </div>
            </div>
        );
    }
}

Login = Form.create()(Login);

function mapStateToProps(state) {
  return {
    loading: state.user.loading
  };
}

export default connect(mapStateToProps) (Login);
